<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级菜单jq.html</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<style>
			.test ul {
				list-style: none;
				margin: 0px;
			}
			
			.test ul li {
				width: 150px;
				border: double;
				border-top-color: red;
				float: left;
				/*float: inherit;这是竖着排列*/
				padding: 0px;
			}
			
			.test ul li ul {
				padding: 0px;
			}
			
			.test ul li ul li {
				width: auto;
				border: groove;
				border-top-color: blue;
				float: inherit;
			}
			
			.open {
				color: aqua;
			}
		</style>
	</head>

	<body>
		<div class="test">
			<ul>
				<li>
					<a>一级菜单A</a>
					<ul>
						<li>
							<a href="#">二级菜单A1</a>
						</li>
						<li>
							<a href="#">二级菜单A2</a>
						</li>
						<li>
							<a href="#">二级菜单A3</a>
						</li>
					</ul>
				</li>
				<li>
					<a>一级菜单B</a>
					<ul>
						<li>
							<a href="#">二级菜单B1</a>
						</li>
						<li>
							<a href="#">二级菜单B2</a>
						</li>
						<li>
							<a href="#">二级菜单B3》</a>
							<ul>
								<li>
									<a href="#">三级B31</a>
								</li>
								<li>
									<a href="#">三级B32》</a>
									<ul>
										<li>
											<a href="#">四1</a>
										</li>
										<li>
											<a href="#">四2 》</a>
											<ul>
												<li>
													<a href="#">51</a>
												</li>
												<li>
													<a href="#">52</a>
												</li>
												<li>
													<a href="#">53</a>
												</li>
											</ul>
										</li>
										<li>
											<a href="#">四3</a>
										</li>
									</ul>
								</li>
								<li>
									<a href="#">三级B33</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a>一级菜单C</a>
					<ul>
						<li>
							<a href="#">二级菜单C1</a>
						</li>
						<li>
							<a href="#">二级菜单C2</a>
						</li>
						<li>
							<a href="#">二级菜单C3</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			/* js 语句 $(function(){});*/
			$(function() {
				$(".test li").find('ul').hide();
				$(".test li>a ").click(
					/*找父亲（li）下面的ul*/

					function() {

						if($(this).parent('li').children('ul').length > 0) {
							//存在子列表
							if($(this).hasClass('open')) {
								//原本打开现在关闭					 
								$(this).removeClass('open');
								$(this).parent('li').find('li').children('a').removeClass('open');
								$(this).parent('li').find('ul').hide(500);
							} else {
								//原本关闭现在打开								
								$(this).addClass('open');
								$(this).parent('li').children("ul").show(500);

								//关闭其他支路打开的
								$(this).parent('li').siblings('li').find('a').removeClass('open');
								$(this).parent('li').siblings('li').find("ul").hide();

							}

						}

					}
				);

			});
		</script>

</html>